<!-- src/components/Grades.vue -->
<template>
  <div class="grades-container">
    <el-table :data="paginatedGrades" style="width: 100%">
      <el-table-column prop="courseId" label="课程ID" width="100"></el-table-column>
      <el-table-column prop="courseName" label="课程名" width="200"></el-table-column>
      <el-table-column prop="score" label="分数" width="100"></el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="grades.length">
    </el-pagination>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Grades',
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      grades: []
    };
  },
  computed: {
    paginatedGrades() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.grades.slice(start, end);
    }
  },

  created(){
    this.fetchScore() 
  },

  methods: {
    fetchScore(){
    
        //获取用户ID和课程ID
      let userId = localStorage.getItem("userId")
    
    
      axios.get("/api/course/score?userId="+userId).then(response => {
        this.grades = response.data
      }).catch(err => {
        this.$message.error(err.response.data)
      })
    },

    
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  }
};
</script>

<style scoped>
.grades-container {
  padding: 20px;
}
</style>
